<template>
  <div
    class="dropdown-menu"
    :class="{ sticky: props.sticky }">
    <van-dropdown-menu ref="menuRef">
      <van-dropdown-item
        v-for="item in props.menuItem"
        :key="item.id"
        v-model="item.model"
        :title="item.model ? '' : item.title"
        :options="item.option"
        @change="item.chanage($event)">
        <template v-if="item.slot">
          <slot :name="item.slot"></slot>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div
      v-if="props.isRigthInfo"
      class="rightinfo">
      <span>仅显示未学</span>
      <van-switch
        v-model="checked"
        size="15px" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const menuRef = ref();
const checked = ref<boolean>(false);
interface Props {
  menuItem?: any;
  sticky?: boolean;
  top?: string;
  isRigthInfo?: boolean;
  justifyContent?: string;
}
const props = withDefaults(defineProps<Props>(), {
  menuItem: {},
  sticky: false,
  top: '0',
  // 是否显示右侧信息
  isRigthInfo: false,
  justifyContent: 'left'
});
// 关闭弹窗
const close = () => {
  menuRef.value.close();
};

defineExpose({
  close
});
</script>

<style lang="scss" scoped>
.dropdown-menu {
  position: relative;
  .rightinfo {
    position: absolute;
    right: 40px;
    top: 26px;
    font-size: 24px;
    letter-spacing: 0px;
    color: #666666;
    display: flex;
    justify-content: left;
    align-items: center;
    span {
      margin-right: 15px;
    }
  }
  :deep(.van-dropdown-menu__bar) {
    box-shadow: 0 0 0 #fff;
    padding: 0 40px;
    display: flex;
    justify-content: v-bind('props.justifyContent');
  }
  :deep(.van-haptics-feedback) {
    flex: inherit;
    margin-left: 32px;
    &:first-child {
      margin: 0;
    }
    .van-dropdown-menu__title {
      color: #666;
      font-size: 28px;
      padding: 0 27px 0 0;
      max-width: 200px;
      &::after {
        content: '\e6af';
        border: 0;
        font-family: 'iconfont' !important;
        transform: rotate(0);
        font-size: 16px;
        top: 50%;
        right: 0;
        transform: translateY(-50%) rotate(0);
        margin: 0;
      }
    }
    .van-dropdown-menu__title--active {
      color: #007aff;
    }
    .van-dropdown-menu__title--active::after {
      transform: translateY(-50%) rotate(180deg);
      transition: all 0.5s;
    }
  }
  :deep(.van-dropdown-item__content) {
    max-height: 40%;
  }
}
.sticky {
  position: sticky;
  z-index: 20;
  top: v-bind('props.top');
}
</style>
